<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";

const props = defineProps(["x", "data", "grid","data", "data1", "data2"]);
const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);

  const option = {
    title: {
      text: "在线教育",
      textStyle: {
        fontSize: '14px',
        color: '#C9E9F8',
        fontStyle: 'normal',
        textTransform: 'none',
      }
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["用户数据", "资源数据", "访问数据"],
      right: 0,
      textStyle: {
        color:'#C9E9F8'
      }
    },
    grid: {
      left: "0%",
      right: "4%",
      bottom: "0%",
      top: 20,
      containLabel: true,
    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        textStyle: { color: "rgba(201, 233, 248, 0.60)" },
      },
      axisLine: {
        lineStyle: {
          color: "#3D4985",
        },
      },
    },
    yAxis: {
      name: "",
      type: "value",
      nameGap: 8,
      nameTextStyle: {
        // y轴name的样式调整
        fontSize: 12,
        color: "#ccd5ff",
      },
      axisTick: { show: false },
      axisLabel: {
        show: true,
        textStyle: { color: "rgba(201, 233, 248, 0.60)" },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#3D4985",
          fontSize: "12px",
          fontWeight: 400,
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#3D4985",
        },
      },
    },
    series: [
      {
        name: "用户数据",
        type: "line",
        stack: "Total",
        data: props.data,
      },
      {
        name: "资源数据",
        type: "line",
        stack: "Total",
        data: props.data1,
      },
      {
        name: "访问数据",
        type: "line",
        stack: "Total",
        data: props.data2,
      },
    ],
  };

  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
